<!--
 * @Author: 雷宇航
 * @Date: 2021-08-02 15:16:03
 * @LastEditTime: 2021-08-10 16:42:10
 * @LastEditors: 雷宇航
 * @Description: 
 * @FilePath: \icm\icm-vue\src\views\hifar\contract\modules\ContractSalePurchaseApplyDetail.vue
-->
<template>
  <div id="ContractSalePurchaseApplyDetail">
    <a-spin :spinning="confirmLoading">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane :tab="index ? index + '、采购申请' : '采购申请'" key="1"></a-tab-pane>
      </a-tabs>
      <a-card v-for="(v, i) in list" :key="i" style="margin: 10px 0">
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :pagination="false"
          :dataSource="v"
          :loading="loading"
          class="j-table-force-nowrap"
        >
        </a-table>
        <j-editable-table
          :ref="refKeys[0]"
          :loading="ContractSalePurchaseApplyDetailTable.loading"
          :columns="ContractSalePurchaseApplyDetailTable.columns"
          :dataSource="v[0].itemList"
          :disabled="formDisabled"
          :rowNumber="true"
        >
          <template v-slot:remarks="props">
            <a-popover :content="props.text">
              <div>
                <a-input
                  :value="props.text"
                  :disabled="formDisabled"
                ></a-input>
              </div>
            </a-popover>
          </template>
        </j-editable-table>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { toFixedTwo } from '@/utils/util'

export default {
  mixins: [JEditableTableMixin],
  props: {
    list: {
      type: Array,
      default: [{}],
      required: true,
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      name: 'ContractSalePurchaseApplyDetail',
      confirmLoading: false,
      formDisabled: true,
      loading: false,
      url: {
        list: '/contract/contractPurchaseApply/nonPermissionList',
      },
      refKeys: ['ContractSalePurchaseApplyDetail'],
      tableKeys: ['ContractSalePurchaseApplyDetail'],
      activeKey: 'ContractSalePurchaseApplyDetail',
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '合同名称',
          align: 'center',
          dataIndex: 'saleName',
          scopedSlots: { customRender: 'saleName' },
        },
        {
          title: '合同编号',
          align: 'center',
          dataIndex: 'saleNum',
        },
        {
          title: '项目经理',
          align: 'center',
          dataIndex: 'projectCharger',
        },
        {
          title: '客户简称',
          align: 'center',
          dataIndex: 'customerName',
        },

        {
          title: '采购简述',
          align: 'center',
          dataIndex: 'summary',
        },
      ],
      ContractSalePurchaseApplyDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '货物名称',
            required: true,
            key: 'goodsName',
            type: FormTypes.input,
            dictCode: 'icm_payment_collection_condition',
            placeholder: '请输入${title}',
            defaultValue: '',
            width: '20%',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '规格型号',
            required: true,
            key: 'model',
            type: FormTypes.input,
            placeholder: '请输入${title}',
            defaultValue: '',
            width: '10%',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '数量',
            required: true,
            key: 'amount',
            type: FormTypes.inputNumber,
            placeholder: '请输入${title}',
            width: '10%',
            validateRules: [
              { required: true, message: '${title}不能为空' },
              { pattern: /^[1-9]\d*$/, message: '请输入数字!' },
            ],
          },
          {
            title: '单价(元)',
            required: true,
            key: 'unitPrice',
            width: '9%',
            type: FormTypes.inputNumber,
            placeholder: '请输入单价',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '总价',
            required: false,
            disabled: true,
            key: 'totalPrice',
            width: '9%',
            type: FormTypes.inputNumber,
          },
          {
            title: '交付日期',
            required: true,
            key: 'deliveryDate',
            width: '12%',
            type: FormTypes.date,
            placeholder: '请选择',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '是否预算内',
            required: true,
            key: 'withinBudget',
            dictCode: 'switch_status',
            width: '10%',
            type: FormTypes.select,
            placeholder: '请输入${title}',
            validateRules: [{ required: true, message: '请选择${title}' }],
            defaultValue: '是',
          },
          {
            title: '备注',
            key: 'remarks',
            type: FormTypes.slot,
            slotName: 'remarks',
            placeholder: '请输入${title}',
            width: '15%',
          },
        ],
      },
    }
  },
  mounted() {},
  methods: {
    // loadData(value) {
    //   getAction(this.url.list, { saleId: value, pageNo: -1, pageSize: -1 }).then((res) => {
    //     if (res.success) {
    //       let data = []
    //       res.result.records.forEach((v, i) => {
    //         data.push(res.result.records.slice(i, i + 1))
    //       })
    //       this.list = data
    //     }
    //   })
    // },
  },
  watch: {
    // mainId: {
    //   immediate: true,
    //   handler(value) {
    //     if (value) {
    //       this.loadData(value)
    //     }
    //   },
    // },
    list: {
      deep: true,
      immediate: true,
      handler(value) {
        if (value.length) {
          value.forEach((val) => {
            val[0].itemList.forEach((v) => {
              if (v.amount && v.unitPrice) {
                v.totalPrice = toFixedTwo(v.amount * v.unitPrice)
              }
            })
          })
        }
      },
    },
  },
}
</script>

<style>
#ContractSalePurchaseApplyDetail .input-table .thead {
  overflow-y: auto;
}
#ContractSalePurchaseApplyDetail .input-table .scroll-view {
  overflow-y: auto;
}
#ContractSalePurchaseApplyDetail .input-table .tbody .tr:last-child {
  border-bottom: 0;
}
</style>
